<template>
    <div class="group-container">
        <div class="title group-title">{{config.label}}</div>
        <div class="component-list">
            <draggable class="drag-container"
                       v-model="config.child"
                       handle=".move"
                       chosenClass="chosen"
                       forceFallback="true"
                       group="common"
                       animation="1000"
                       :move="move"
                       @update="update"
                       @sort="scrollFn"
                       @add="add">
                <transition-group style="min-height:113px;display:block">
                    <div
                            :class="[indexParam.groupIndex===index&&indexParam.commonIndex===childIndex?'item active':'item']"
                            v-for="(element,childIndex) in config.child"
                            :key="childIndex.toString()">
            <span class="delete"
                  @click="handleDelete({groupIndex:index,commonIndex:childIndex})"
                  title="delete">
              <i class="el-icon-delete"></i>
            </span>
                        <span class="setting"
                              title="setting"
                              @click="handleGetSettingIndex({groupIndex:index,commonIndex:childIndex})"
                        >
              <i class="el-icon-setting"></i>
            </span>
                        <span class="move" title="move"><i class="el-icon-rank"></i></span>
                        <template v-if="element.type==='singleLineText'">
                            <Single :config="element"></Single>
                        </template>
                        <template v-if="element.type==='textarea'">
                            <Textarea :config="element"></Textarea>
                        </template>
                        <template v-if="element.type==='richText'">
                            <RichText :config="element"></RichText>
                        </template>
                        <template v-if="element.type==='drop'">
                            <Drop :config="element"></Drop>
                        </template>
                        <template v-if="element.type==='radio'">
                            <Radio :config="element"></Radio>
                        </template>
                        <template v-if="element.type==='checkbox'">
                            <Checkbox :config="element"></Checkbox>
                        </template>
                        <template v-if="element.type==='open'">
                            <Open :config="element"></Open>
                        </template>
                        <template v-if="element.type==='slider'">
                            <Slider :config="element"></Slider>
                        </template>
                        <template v-if="element.type==='inputNumber'">
                            <InputNumber :config="element"></InputNumber>
                        </template>
                        <template v-if="element.type==='date'">
                            <DatePicker :config="element"></DatePicker>
                        </template>
                        <template v-if="element.type==='time'">
                            <TimePicker :config="element"></TimePicker>
                        </template>
                    </div>
                </transition-group>
            </draggable>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import draggable from 'vuedraggable';
    import assembly from '@/config/assembly';//导入组件数据
    import Single from "../Single/Single";
    import Textarea from "../Textarea/Textarea";
    import RichText from "../RichText/RichText";
    import Drop from "../Drop/Drop";
    import Radio from "../Radio/Radio";
    import Checkbox from "../Checkbox/Checkbox";
    import Open from "../Open/Open";
    import Slider from "../Slider/Slider";
    import InputNumber from "../InputNumber/InputNumber";
    import DatePicker from "../DatePicker/DatePicker";
    import TimePicker from "../TimePicker/TimePicker";

    export default {
        name: 'Group',
        data() {
            return {
                assemblyParams: assembly.assemblyParams
            }
        },
        mounted() {
        },
        props: {
            config: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            index: {
                type: Number,
                default: () => {
                    return 0
                }
            },
            indexParam: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        components: {
            draggable,
            Single,
            Textarea,
            RichText,
            Drop,
            Radio,
            Checkbox,
            Open,
            Slider,
            InputNumber,
            DatePicker,
            TimePicker
        },
        methods: {
            /**
             * 监听添加组件事件
             * @param e
             */
            add(e) {
                const type = e.item.dataset.type;//组件类型
                const index = e.newDraggableIndex;
                const config = this.config;
                const formList = config.child;
                const assemblyParams = this.assemblyParams;
                const currentAssembly = assemblyParams[type];
                currentAssembly.index = new Date().getTime().toString();
                const newItem = Object.assign({}, formList[index], currentAssembly);
                formList[index] = newItem;
                config.child = formList;
                Vue.set(this.config.child, index, newItem);
                this.$emit('changeForm', {index: this.index, data: config});
            },
            /**
             * 监听拖拽移动事件
             * @param e
             * @returns {boolean}
             */
            move(e) {
                //阻止组件反向拖拽
                if (e.related.dataset.type === 'common') {
                    return false;
                }
            },
            scrollFn(e) {
                console.log(e);
                this.handleInitRightData();
            },
            update(e) {
                console.log(e);
                this.handleInitRightData();
            },
            /**
             * 设置组件下标
             * @param indexParam
             */
            handleGetSettingIndex(indexParam) {
                this.$emit('handleGetSettingIndex', indexParam);
            },
            /**
             * 删除组件
             * @param indexParam
             */
            handleDelete(indexParam) {
                this.$emit('handleDelete', indexParam);
            },
            /**
             * 初始化数据
             */
            handleInitRightData() {
                this.$emit('handleInitRightData', {});
            }
        }
    }
</script>
<style lang="less" scoped>
    @import "group.less";
</style>
